<template>
  <div class="main">
    <div class="header-card">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="title">{{ $t("IdentityVerification") }}</div>
      </div>
    </div>
    <div class="cont text-sm">
      <div
        class="flex justify-between items-center border-y border-[#ffefd9] border-opacity-20 py-2"
      >
        <div class="w-1/2 text-[#ffefd9]">{{ $t("IdentityStatus") }}</div>
        <div class="w-1/2 text-[#ffefd9]">
          <!-- Telah diverifikasi/Tidak terautentikasi/Sedang dalam tinjauan -->
          <!-- {{
            is_verify === 0
            ? "Sedang dalam tinjauan"
            : status === 1
              ? "Tidak terautentikasi"
              : "Telah diverifikasi"
          }} -->
          {{
            is_verify === 0
              ? $t("NotAuthenticated")
              : is_verify === 1
              ? $t("HasBeenVerified")
              : $t("UnderReview")
          }}

          <!-- Telah diverifikasi/Tidak terautentikasi/Sedang dalam tinjauan -->
        </div>
      </div>
      <div class="py-2">
        <div class="text-[#ffefd9] mb-2">ID information</div>
        <van-field
          class="mb-2 rounded-lg !bg-[#ffefd9]"
          v-model="name"
          :disabled="name != '' && is_verify != 0"
          :placeholder="$t('namePlaceholder')"
        />
        <van-field
          class="rounded-lg !bg-[#ffefd9]"
          v-model="idNum"
          :placeholder="$t('idNumPlaceholder')"
          :disabled="idNum != '' && is_verify != 0"
        />
      </div>
      <div class="mb-4">
        <div class="text-[#ffefd9] mb-2">{{ $t("UploadIDPhoto") }}</div>
        <div class="flex justify-between">
          <van-uploader
            class="w-1/2"
            :after-read="afterReadFaceImg"
            :disabled="face_img != '' && is_verify != 0"
            capture="camera"
            accept="image/*"
          >
            <!-- <van-button icon="plus" type="primary">上传文件</van-button> -->
            <div
              class="w-full h-32 border-dashed border-[#ffefd9] border-2 rounded-lg flex flex-col justify-center items-center p-2"
            >
              <img
                class="w-6"
                src="../../assets/img/add.png"
                v-if="!face_img"
              />
              <div v-if="!face_img">{{ $t("IDPhoto") }}</div>
              <img class="w-full h-full" :src="face_img" v-if="face_img" />
            </div>
          </van-uploader>
          <van-uploader
            class="w-1/2"
            :after-read="afterReadHandleImg"
            :disabled="handle_img != '' && is_verify != 0"
            accept="image/*"
            capture="camera"
          >
            <div
              class="w-full h-32 border-dashed border-[#ffefd9] border-2 rounded-lg flex flex-col justify-center items-center p-2"
            >
              <img
                class="w-6"
                src="../../assets/img/add.png"
                v-if="!handle_img"
              />
              <div class="text-center" v-if="!handle_img">
                {{ $t("IDPhotoWithHandHolding") }}
              </div>
              <img class="w-full h-full" :src="handle_img" v-if="handle_img" />
            </div>
          </van-uploader>
        </div>
      </div>
      <div
        class="sign-out !mt-10 text-white !text-xl"
        @click="sumbit"
        v-if="is_verify === 0"
      >
        {{ $t("Send") }}
      </div>
      <div
        class="width-[682px] h-[50px] bg-[#969696] !mt-2 text-white !text-xl flex justify-center items-center rounded-lg"
        v-if="is_verify === 2"
      >
        {{ $t("UnderReview") }}
      </div>
    </div>
  </div>
</template>

<script>
import { httpImgUpload, httpIdVerify, httpIdInfo } from "@/http/api";
// import { phoneGetCodeNum, phoneSetCodeNum } from "@/utils/common";
export default {
  data() {
    return {
      // input0_active: false,
      // input1_active: false,
      // input2_active: false,
      // input3_active: false,
      // currentPassword: "",
      // password: "",
      // newPassword: "",
      // code: "",
      // time: 0,
      // setAjax: false,
      backend_img: "",
      name: "",
      idNum: "",
      disabled: true,
      face_img: "",
      face_name: "",
      handle_img: "",
      handle_name: "",
      is_verify: "",
      status: "",
      showSubmitButton: false,
      id_name: "",
    };
  },
  created() {
    this.getHttpIdInfo();
  },

  methods: {
    async getHttpIdInfo() {
      let res = await httpIdInfo();
      if (res.code == 0) {
        this.is_verify = res.data.is_verify;
        this.name = res.data?.id_info.id_name;
        this.idNum = res.data?.id_info.id_number;
        this.id_name = res.data?.id_info.id_name;
        this.id_number = res.data?.id_info.id_number;
        this.face_img = res.data?.id_info.face_img;
        this.backend_img = res.data?.id_info.backend_img;
        this.handle_img = res.data?.id_info.handle_img;

        this.status = res.data.status;
        console.log(this.id_name);
      }
    },

    async afterReadFaceImg(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      let res = await httpImgUpload(formData);

      if (res.code == 0) {
        this.face_img = res.data.pic_url;
        this.face_name = res.data.name;
      }
    },
    async afterReadHandleImg(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      let res = await httpImgUpload(formData);

      if (res.code == 0) {
        this.handle_img = res.data.pic_url;
        this.handle_name = res.data.name;
      }
    },

    async sumbit() {
      if (!this.name) {
        return this.$Toast.fail(this.$t("IdentityVerificationMsg1"));
      }
      if (!this.idNum) {
        return this.$Toast.fail(this.$t("IdentityVerificationMsg2"));
      }
      // if (!this.face_img) {
      //   return this.$Toast.fail("请上传身份证件照片");
      // }
      // if (!this.handle_img) {
      //   return this.$Toast.fail("请上传手持身份证件照片");
      // }
      let res = await httpIdVerify({
        id_name: this.name,
        id_number: this.idNum,
        face_img: this.face_name,
        handle_img: this.handle_name,
      });
      return this.$Toast.success(res.message);
      // if (res.code == 0) {
      //   return this.$Toast.success(res.message);
      // }
      // console.log(this.name);
      // console.log(this.idNum);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./ucenter-common.less");

.main {
  .header-card {
    width: 750px;
    height: 215px;
    // background: url("~@/assets/img/ucheader2.png") center/750px 215px;
    background-color: #000000;

    .uc-header {
      padding-top: 60px;
    }
  }

  .cont {
    width: 100%;
    // background: #fff;
    background-color: #000000;
    position: relative;
    top: -60px;
    border-radius: 60px;
    padding: 30px;

    .img1 {
      width: 128px;
      height: 128px;
      background: url("~@/assets/img/SetPassword.png") center/128px 128px;
      margin: auto;
      margin-bottom: 76px;
    }

    .getcodebtn {
      width: 300px !important;
      background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
      color: #fff;

      &.active {
        background: rgb(72, 113, 248);
        color: #fff;
      }
    }

    .query-btn {
      width: 618px;
      height: 93px;
      opacity: 1;
      /** background: linear-gradient(178.44deg,
          rgba(238, 220, 201, 1) 0%,
          rgba(220, 188, 155, 1) 100%);
      box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);**/
      background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
      font-size: 28px;
      letter-spacing: 0px;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      margin-top: 108px;
      border-radius: 20px;
      transition: all 0.15s;

      &:active {
        box-shadow: 1px 3px 4px 0px rgba(201, 173, 144, 0.51);
        transform: translateY(2px);
      }

      &.disabled {
        background: #dfe6fc;
        box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0);
        color: #ccc;
      }
    }
  }

  .sign-out {
    width: 682px;
    height: 93px;
    opacity: 1;
    // background: rgba(223, 230, 252, 1);
    /**background-color: #e2da9e;
    border: 1px solid rgba(0, 0, 0, 1);**/
    background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
    display: flex;
    user-select: none;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    // font-weight: 400;
    // color: rgba(171, 182, 212, 1);
    margin: auto;
    border-radius: 16px;
  }
}

::v-deep .van-uploader__wrapper {
  width: 100% !important;
}

::v-deep .van-uploader__input-wrapper {
  width: 90% !important;
}
</style>
